<template>
	<view class="box">
		<view class="house-news mes">
			房屋信息
		</view>
		<view class="house-location">
			北京西三旗花园1号楼 101
		</view>
		<view class="person-news mes">
			业主信息
		</view>
		<u-form :model="form" :rules="rules">
			<u-form-item label="姓名" labelWidth="208rpx" prop="name">
				<input type="text" :value="form.name" placeholder="请填写您的真实姓名" />
			</u-form-item>
			<u-form-item label="性别" labelWidth="208rpx">
				<u-radio-group v-model="form.radiovalue">
					<u-radio :customStyle="{marginRight: '30rpx'}" v-for="(item, index) in value" :key="index"
						:label="item.name" :name="item.name">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="手机号" labelWidth="208rpx" prop="mobile">
				<input type="text" :value="form.mobile" placeholder="请输入您的手机号" />
				<block slot="right">
					<u-count-down @finish="onFinish" v-if="isShowCountDown" :time="6 * 1000" format="ss s">
					</u-count-down>
					<view v-else @click="getCode" class="code-btn">获取验证码</view>
				</block>
			</u-form-item>
			<u-form-item label="验证码" labelWidth="208rpx" prop="code">
				<input type="text" :value="form.code" placeholder="请输入手机验证码" />
			</u-form-item>
		</u-form>
		<!-- 身份证 -->
		<view class="sfz">
			<view class="top">
				上传本人身份证照片
			</view>
			<view class="mes">
				请拍摄证件原件，并使照片中证件边缘完整，文字清晰，光线均匀。
			</view>
			<view class="indent">
				<image src="../../static/icon/upload.png" mode=""></image>
				<view class="">
					上传人像面照片
				</view>
			</view>
			<view class="indent">
				<image src="../../static/icon/upload.png" mode=""></image>
				<view class="">
					上传国徽面照片
				</view>
			</view>
		</view>
		<!-- bottom -->
		<view class="bottom" @click="checkForm">
			<image src="../../static/icon/check.png" mode=""></image>
			<view class="">
				提交审核
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],
				isShowCountDown: false,
				form: {
					mobile: '',
					code: '',
					radiovalue: '男',
					name: ''
				},
				rules: {
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^((\+|00)86)?1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/,
							message: '手机号码格式不正确',
							trigger: ['change', 'blur'],
						}
					],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur'],
					}, {
						pattern: /^\d{6}$/,
						message: '验证码格式不正确',
						trigger: ['change', 'blur'],
					}],
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur'],
					}]
				}
			};
		},
		methods: {
			// checkForm
			checkForm() {
				if (this.form.name.trim() === '') {
					return uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
				} else if (this.form.mobile.trim() === '') {
					return uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				} else if (this.form.code.trim() === '') {
					return uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
				}
			},
			getCode() {
				this.isShowCountDown = true
			},
			// 倒计时结束
			onFinish() {
				this.isShowCountDown = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mes {
		color: #979797;
		font-weight: regular;
		font-size: 24rpx;
		padding: 30rpx 0 20rpx 30rpx;
		line-height: 1.5;
	}

	.box {
		// padding: 0 30rpx;
		background: #FAFAFA;
		min-height: 80%;
		padding-bottom: 263rpx;

		.house-location {
			background-color: #fff;
			padding: 30rpx 0 30rpx 30rpx;
			font-size: 28rpx
		}

		::v-deep .u-form {
			background-color: #fff;

			.item__body__right__content__icon {
				color: #5591AF;
			}

		}

		::v-deep .u-count-down__text {
			color: #5591AF;
		}

		::v-deep .u-form-item__body {
			padding-left: 30rpx;
			padding-right: 30rpx;
		}

		.sfz {
			background-color: #fff;
			margin-top: 30rpx;
			padding-bottom: 30rpx;

			.top {
				font-style: 28rpx;
				padding: 30rpx 0 0 30rpx;
				margin-bottom: -20rpx;
			}
		}

		.indent {
			width: 690rpx;
			height: 340rpx;
			background-color: #FAFAFA;
			color: #5591AF;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-left: 30rpx;
			margin-top: 20rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

	}

	.bottom {
		width: 100%;
		height: 213rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}
</style>
